<!--
 * @Author: dengyl
 * @Date: 2022-01-13 17:37:51
 * @LastEditTime: 2022-06-08 14:39:44
 * @LastEditors: 代琪 1529992814@qq.com
 * @Description: 组合栏目
 * @FilePath: \code\ctp-static-portal-front\src\components\tabs\compose-tabs.vue
-->
<template>
  <div class="compose-tabs">
    <component :contentWidth="contentWidth" :is="type" :dataList="tabList" :selectTab="selectTab" />
  </div>
</template>

<script>
  import StaticIcon from './components/static-icon.vue';
  import Card from './components/card.vue';
  import Nav from './components/nav.vue';
  import ColorMagnet from './components/color-magnet.vue';

  export default {
    name: 'ComposeTabs',
    components: {
      card1: StaticIcon, // 标准图标
      card2: ColorMagnet, // 多彩磁贴
      card3: Card, //简约卡片1
      card4: Nav, //简约卡片2
    },
    props: {
      dataList: {
        type: Array,
      },
      selectTab: {
        type: Function,
      },
      contentWidth: { type: Number },
    },
    data() {
      return { type: '' };
    },
    computed: {
      tabList() {
        const _tabColorArray = [
          '#49a4ea',
          '#8693f3',
          '#5484ff',
          '#ff916e',
          '#3cbaff',
          '#38a0f5',
          '#ffae43',
        ];

        this.dataList.forEach((item, i) => {
          let options = item.sectionData.options;
          const { sections_style } = options;
          const _colorIndex = i < 7 ? i : i % 7;
          switch (sections_style) {
            case 'card3':
            case 'card4':
              options.sections_tabBgColor = options.sections_tabBgColor
                ? options.sections_tabBgColor
                : '#f3f3f3';
              options.sections_tabSelectedColor = options.sections_tabSelectedColor
                ? options.sections_tabSelectedColor
                : '#297ffb';
              break;
            case 'card1':
            case 'card2':
              options.sectionTabBgColor = options.sectionTabBgColor
                ? options.sectionTabBgColor
                : _tabColorArray[_colorIndex];
              options.sectionTabIcon = options.sectionTabIcon
                ? options.sectionTabIcon
                : `vp-colourful-icons${_colorIndex}`;
            default:
              break;
          }
        });

        return this.dataList;
      },
    },
    created() {
      this.type = this.dataList[0].sectionData.options.sections_style;
    },
  };
</script>
